<!-- Author:Rain -->
<template>
    <div class="page-box">
        <div class="user-center-wrap">
            <div class="bottom-content">
                <div class="left">
                    <!-- 上边的小碎屑 -->
                    <div id="fragment-left">
                        <el-button @click="centerDialogVisible = true" plain type="primary">
                            发布职位<el-icon class="el-icon--right">
                                <Promotion />
                            </el-icon>
                        </el-button>
                        <el-dialog fullscreen="true" v-model="centerDialogVisible" title="发布/更新职位" width="600"
                            align-center>
                            <div style="padding:30px 400px;">
                                <el-form :model="form" label-width="auto" style="max-width: 600px;">
                                    <el-form-item label="公司">
                                        <el-input v-model="form.company" />
                                    </el-form-item>
                                    <el-form-item label="职位名称">
                                        <el-input v-model="form.posName" />
                                    </el-form-item>
                                    <el-form-item label="职位类型">
                                        <el-select v-model="form.posType" placeholder="填写职位类型">
                                            <el-option label="研发类" value="研发类" />
                                            <el-option label="销售类" value="销售类" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="招聘类型">
                                    <el-checkbox-group v-model="form.type">
                                        <el-checkbox v-for="item in types" :value="item" :label="item" name="type">
                                            {{ item }}
                                        </el-checkbox>
                                    </el-checkbox-group>
                                    </el-form-item>
    
                                    <el-form-item label="经历和学历">
                                        <el-col :span="11">
                                            <el-select v-model="form.experience" placeholder="经历" style="width: 100%" />
                                        </el-col>
                                        <el-col :span="2" class="text-center">
                                            <!-- <span class="text-gray-500">-</span> -->
                                        </el-col>
                                        <el-col :span="11">
                                            <el-select v-model="form.background" placeholder="选择学历" style="width: 100%" />
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="薪资范围">
                                        <el-col :span="11">
                                            <el-select v-model="form.salary.min" placeholder="Select" style="width: 100%" />
                                        </el-col>
                                        <el-col :span="2" class="text-center">
                                            <!-- <span class="text-gray-500">-</span> -->
                                        </el-col>
                                        <el-col :span="11">
                                            <el-select v-model="form.salary.max" placeholder="Select" style="width: 100%" />
                                        </el-col>
                                    </el-form-item>
    
    
                                    <el-form-item label="职位描述">
                                        <el-input v-model="form.desc" type="textarea" />
                                    </el-form-item>
                                    <el-form-item label="职位关键词">
                                        <el-select v-model="value1" multiple placeholder="Select" style="width: 80%">
                                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                        <el-button plain
                                            style="position: absolute;top: 50%;right: 0;transform: translateY(-50%);"
                                            type="primary" @click="onSubmit">提取标签</el-button>
                                    </el-form-item>
    
                                    <el-form-item label="工作地点">
                                        <el-input :value="form.address" />
                                    </el-form-item>
                                    <el-form-item label="实习要求">
                                        <el-col :span="11">
                                            <el-select v-model="form.require.month" placeholder="最少实习月数"
                                                style="width: 100%" />
                                        </el-col>
                                        <el-col :span="2" class="text-center">
                                            <span class="text-gray-500"></span>
                                        </el-col>
                                        <el-col :span="11">
                                            <el-select v-model="form.require.week" placeholder="每周最少实习天数"
                                                style="width: 100%" />
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item style="position: absolute;left: 450px;">
                                        <el-button>取消</el-button>
                                        <el-button type="primary" @click="onSubmit">发布更新</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-dialog>
                    </div>
                    <div id="fragment-right">
                        <el-input v-model="input2" style="width: 140px" placeholder="搜索" :prefix-icon="Search" />
                        <el-select v-model="value" clearable placeholder="选择职位类型"
                            style="width: 140px;margin-left: 10px;">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                    <div id="MatchPart">
                        <div>
                            <div class="card-panel mb-20px"><!---->
                                <div class="tabs">
                                    <div @click="tabStatus = 1" :class="{ 'active': tabStatus == 1 }" class="tab">
                                        全部职位
                                    </div>
                                    <div @click="tabStatus = 2" :class="{ 'active': tabStatus == 2 }" class="tab">
                                        开放中
                                    </div>
                                    <div @click="tabStatus = 3" :class="{ 'active': tabStatus == 3 }" class="tab">
                                        审核中
                                    </div>
                                    <div @click="tabStatus = 4" :class="{ 'active': tabStatus == 4 }" class="tab">
                                        审核失败
                                    </div>
                                    <div @click="tabStatus = 5" :class="{ 'active': tabStatus == 5 }" id="tab-discuss"
                                        class="tab">
                                        已关闭
                                    </div>
                                </div>
                            </div>
                            <div class="card-panel"><!---->
                                <div class="content">
                                    <!-- 下面的内容区 -->
                                    <!-- 就进行封装 -->
                                    <div v-show="tabStatus === 1">
                                        <div v-for="i in 4" class="pos-item">
                                            <div class="desc">
                                                <div class="posname">{{ ['前端','java工程师',"UI设计师","Web前端实习","测试工程师","运维"][Math.floor(Math.random()*6)] }}</div>
                                                <div class="posTag">
                                                    <span class="tag">深圳</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">1-3年</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">本科</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">10-15K</span>
                                                </div>
                                            </div>
                                            <div class="data">
                                                <div class="data-items">
                                                    <div class="data-item">
                                                        <span>{{ Math.ceil(Math.random()*1000) }}</span>
                                                        <span class="tag">访问过</span>
                                                    </div>
                                                    <div class="data-item">
                                                        <span>{{ Math.ceil(Math.random()*233) }}</span>
                                                        <span class="tag">沟通过</span>
                                                    </div>
                                                    <div class="data-item">
                                                        <span>{{ Math.ceil(Math.random()*100) }}</span>
                                                        <span class="tag">收藏过</span>
                                                    </div>
                                                </div>
                                                <div class="pos-status">
                                                    开放中
                                                </div>
                                            </div>
                                            <div class="todo">
                                                <el-button type="primary" :icon="Edit" circle />
                                                <el-button type="primary" :icon="Lock" circle />
                                                <el-button type="primary" :icon="Delete" circle />
                                            </div>
                                        </div>
                                        <el-pagination id="pagination" small background layout="prev, pager, next"
                                            :total="1" class="mt-4" />
                                    </div>
                                    <div v-show="tabStatus === 2">
                                        <div v-for="i in 4" class="pos-item">
                                            <div class="desc">
                                                <div class="posname">{{ ['前端','java工程师',"UI设计师","Web前端实习","测试工程师","运维"][Math.floor(Math.random()*6)] }}</div>
                                                <div class="posTag">
                                                    <span class="tag">深圳</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">1-3年</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">本科</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">10-15K</span>
                                                </div>
                                            </div>
                                            <div class="data">
                                                <div class="data-items">    
                                                    <div class="data-item">
                                                        <span>{{ Math.ceil(Math.random()*1000) }}</span>
                                                        <span class="tag">访问过</span>
                                                    </div>
                                                    <div class="data-item">
                                                        <span>{{ Math.ceil(Math.random()*233) }}</span>
                                                        <span class="tag">沟通过</span>
                                                    </div>
                                                    <div class="data-item">
                                                        <span>{{ Math.ceil(Math.random()*100) }}</span>
                                                        <span class="tag">收藏过</span>
                                                    </div>
                                                </div>
                                                <div class="pos-status">
                                                    开放中
                                                </div>
                                            </div>
                                            <div class="todo">
                                                <el-button type="primary" :icon="Edit" circle />
                                                <el-button type="primary" :icon="Lock" circle />
                                                <el-button type="primary" :icon="Delete" circle />
                                            </div>
                                        </div>
                                        <el-pagination id="pagination" small background layout="prev, pager, next"
                                            :total="1" class="mt-4" />
                                    </div>
                                    <div v-show="tabStatus === 3">
                                        <div v-for="i in 1" class="pos-item">
                                            <div class="desc">
                                                <div class="posname">前端开发</div>
                                                <div class="posTag">
                                                    <span class="tag">深圳</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">1-3年</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">本科</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">10-15K</span>
                                                </div>
                                            </div>
                                            <div class="data">
                                                <div class="pos-status">
                                                    审核中
                                                </div>
                                            </div>
                                            <div class="todo">
                                                <el-button type="primary" :icon="Edit" circle />
                                                <el-button type="primary" :icon="Lock" circle />
                                                <el-button type="primary" :icon="Delete" circle />
                                            </div>
                                        </div>
                                        <el-pagination id="pagination" small background layout="prev, pager, next"
                                            :total="1" class="mt-4" />
                                    </div>
                                    <div v-show="tabStatus === 4">
                                        <div v-for="i in 2" class="pos-item">
                                            <div class="desc">
                                                <div class="posname">前端开发</div>
                                                <div class="posTag">
                                                    <span class="tag">深圳</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">1-3年</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">本科</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">10-15K</span>
                                                </div>
                                            </div>
                                            <div class="data">
                                                <div class="pos-status">
                                                    审核失败
                                                </div>
                                            </div>
                                            <div class="todo">
                                                <el-button type="primary" :icon="Edit" circle />
                                                <el-button type="primary" :icon="Lock" circle />
                                                <el-button type="primary" :icon="Delete" circle />
                                            </div>
                                        </div>
                                        <el-pagination id="pagination" small background layout="prev, pager, next"
                                            :total="1" class="mt-4" />
                                    </div>
                                    <div v-show="tabStatus === 5">
                                        <div v-for="i in 4" class="pos-item">
                                            <div class="desc">
                                                <div class="posname">前端开发</div>
                                                <div class="posTag">
                                                    <span class="tag">深圳</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">1-3年</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">本科</span>
                                                    <span class="vline"></span>
                                                    <span class="tag">10-15K</span>
                                                </div>
                                            </div>
                                            <div class="data">
                                                <div class="data-items">
                                                    <div class="data-item">
                                                        <span>{{ Math.ceil(Math.random()*1000) }}</span>
                                                        <span class="tag">访问过</span>
                                                    </div>
                                                    <div class="data-item">
                                                        <span>{{ Math.ceil(Math.random()*300) }}</span>
                                                        <span class="tag">沟通过</span>
                                                    </div>
                                                    <div class="data-item">
                                                        <span>{{ Math.ceil(Math.random()*33) }}</span>
                                                        <span class="tag">收藏过</span>
                                                    </div>
                                                </div>
                                                <div class="pos-status">
                                                    已关闭
                                                </div>
                                            </div>
                                            <div class="todo">
                                                <el-button type="primary" :icon="Edit" circle />
                                                <el-button type="primary" :icon="Lock" circle />
                                                <el-button type="primary" :icon="Delete" circle />
                                            </div>
                                        </div>
                                        <el-pagination id="pagination" small background layout="prev, pager, next"
                                            :total="1" class="mt-4" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!---->
        </div>
    </div>
</template>

<script setup lang="ts">
import { Lock, Edit, Search, Delete, Promotion } from '@element-plus/icons-vue'
//项目配置开始
//1.tab状态
let tabStatus = ref(1)
//表单收集箱
const form = reactive({
    company: '小雨文化企业有限公司',
    posName: 'web前端开发',
    posType: '研发类',//这个应该要通过计算得出的
    targetType: '实习招聘',
    experience: '应届/实习',
    background: '本科',
    salary: {
        min: '200',
        max: '400',
    },
    address: "深圳高德地区八达岭",
    type: [],
    desc: '需要掌握许多的软件开发知识！！！',
    //关于实习：
    require: {
        month: '',
        week: ''
    }
})
const types = ['社招全职',
    '校园应届招聘',
    '实习生招聘',
    '兼职招聘']

const onSubmit = () => {
    console.log('submit!')
}

const value1 = ref([])
const input2 = ref('')
const value = ref('')
const options = [
    {
        value: 'all',
        label: '全部职类型',
    },
    {
        value: '研发类',
        label: '研发类',
    },
    {
        value: '产品类',
        label: '产品类',
    },
    {
        value: '管理类',
        label: '管理类',
    },
    {
        value: '销售类',
        label: '销售类',
    },
]
const centerDialogVisible = ref(false)
</script>

<style scoped>
/* 编辑岗位信息 */

.page-box {
    background: url(https://static.shiyanlou.com/lanqiao/frontend/dist/img/page-bg.50c13e0.png) no-repeat;
    background-size: 100% auto;
    width: 100%;
}

.user-center-wrap {
    margin: 0 auto;
    padding-bottom: 0px;
    padding-top: 60px;
    width: 1200px;
}

.user-center-wrap .bottom-content {
    display: flex;
    justify-content: center;
    width: 100%;
}

.user-center-wrap .bottom-content .left {
    width: 870px;
    position: relative;
}

.card-panel {
    background: #fff;
    border-radius: 10px;
}

.mb-20px {
    margin-bottom: 20px;
}

.content {
    padding: 22px 20px;
    position: relative;
    padding-bottom: 60px;
}

#pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 10px;
    bottom: 10px;
}

.tabs {
    align-items: center;
    display: flex;
    justify-content: space-around;
    padding: 20px 25px;
}

.tabs .tab {
    color: #666;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
}

.tabs .tab:not(:last-child) {
    margin-right: 50px;
}

.tabs .tab.active {
    color: #000;
    font-size: 20px;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

.tabs .tab.active:after {
    background: #68b7ff;
    border-radius: 4px;
    bottom: 0;
    content: "";
    height: 8px;
    left: 0;
    position: absolute;
    width: 32px;
    z-index: -1;
}

/* 上边的碎屑 */
#fragment-left {
    position: absolute;
    top: -45px;
}

#fragment-right {
    position: absolute;
    top: -45px;
    right: 0px;
}

/* 下边的列表项 */
.content .pos-item {
    background-color: #f8e8f5;
    height: 80px;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px 30px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.content .pos-item:first-child {
    margin-top: 0;
}

.content .pos-item>div {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 描述部分 */
.pos-item .desc {
    display: flex;
    flex-direction: column;
}

.desc .posname {
    align-self: flex-start;
    font-size: 18px;
}

.tag {
    font-size: 12px;
    color: #878585;
}

/* 中间数据部分 */
.data .data-items {
    display: flex;
    margin-right: 20px;
}

.data .data-items .data-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px;
}
</style>